<template>
    <div>
        <div class="sort-box">
            <div class="sort-warp">
                <header class="sort-head">
                    <div class="sort-head-box">
                        <div class="iconbox">
                            <i class="iconfont back" @click="backAction">&#xe618;</i>
                        </div>
                        <h1 class="sort-name">{{$route.params.sortname}}</h1>
                    </div>
                </header>
                <aside class="sort-menu">
                    <div class="sort-menu-list">
                        <el-dropdown trigger="click">
                            <span class="el-dropdown-link">
                                分类
                                <i class="el-icon-caret-bottom el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>黄金糕</el-dropdown-item>
                                <el-dropdown-item>狮子头</el-dropdown-item>
                                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                                <el-dropdown-item>双皮奶</el-dropdown-item>
                                <el-dropdown-item>蚵仔煎</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>

                        <el-dropdown trigger="click">
                            <span class="el-dropdown-link">
                                排序
                                <i class="el-icon-caret-bottom el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>黄金糕</el-dropdown-item>
                                <el-dropdown-item>狮子头</el-dropdown-item>
                                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                                <el-dropdown-item>双皮奶</el-dropdown-item>
                                <el-dropdown-item>蚵仔煎</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>

                        <el-dropdown trigger="click">
                            <span class="el-dropdown-link">
                                筛选
                                <i class="el-icon-caret-bottom el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>黄金糕</el-dropdown-item>
                                <el-dropdown-item>狮子头</el-dropdown-item>
                                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                                <el-dropdown-item>双皮奶</el-dropdown-item>
                                <el-dropdown-item>蚵仔煎</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </aside>
            </div>
                <ul class="list">
                    <a :key="index" v-for="(item, index) in seller" href="javascript:;">
                        <li>
                        <img class="logo" :src="'//fuss10.elemecdn.com/' + item.image_path.substr(0,1) + '/' + item.image_path.substr(1,2) + '/'
                        + item.image_path.substr(3) + (item.image_path.slice(-3) == 'png' ? '.png' : '.jpeg') + '?imageMogr/format/webp/thumbnail/!120x120r/gravity/Center/crop/120x120/'" alt=".." />
                        <div class="right">
                            <h5><span class="brand">品牌</span>{{item.name}}</h5>
                            <div class="sale">
                            <img class="star" src="../assets/star.png" alt=".." />
                            <span>月售{{item.recent_order_num}}单</span>
                            <span class="bee" v-if="item.delivery_mode">蜂鸟专送</span>
                            </div>
                            <p><span>￥{{item.float_minimum_order_amount}}起送/&nbsp;</span><span>{{item.piecewise_agent_fee.description}}/&nbsp;</span><span>{{item.average_cost}}</span>
                            <span class="time">{{item.order_lead_time}}分钟</span>
                            <span class="info">{{item.distance > 1000 ? (item.distance / 1000).toFixed(2) + 'km' : item.distance + 'm'}}&nbsp;/&nbsp;</span>
                            </p>
                        </div>
                        <div class="bottom">
                            <div class="activity" :key="i" v-for="(val, i) in item.activities" v-if="i > 1 ? false : true">
                            <span class="new" :style="'background: #' + val.icon_color">{{val.icon_name}}</span>
                            <span class="tips">{{val.tips}}{{val.tips}}</span>
                            <span @click="showHide(index)" class="show" v-if="i == 0">{{item.activities.length}}个活动<i class="iconfont">&#xe604;</i></span>
                            </div>
                        </div>
                        </li>
                    </a>
                </ul>
        </div>
    </div>
</template>


<script>
import Vue from 'vue'
import Router from 'vue-router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI)

export default {
  name: 'sort',
  computed: {
      seller () {
      return this.$store.state.seller
    }
  },
  methods:{
      backAction () {
          history.go(-1)
      }
  }
}
</script>

<style lang='scss'>
@import '../../static/px2rem.scss';
.sort-box{
    position: sticky;
    top: 0px;
    z-index: 1000;
    .list {
      width: 100%;
      a {
        display: block;
        width: 100%;
      }
      li {
        float: left;
        padding: px2rem(15) 0;
        width: 100%;
        border-bottom: px2rem(0.5) solid #f7f7f9;
        .logo {
          width: px2rem(60);
          height: px2rem(60);
          margin: 0 px2rem(10);
          float: left;
        }
        .right {
          width: 75%;
          float: left;
          color: #666;
          h5 {
            font-size: px2rem(15);
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            line-height: px2rem(15);
            color: black;
            .brand{
              display: inline-block;
              padding: 0 px2rem(2.5);
              margin-right: px2rem(5);
              border-radius: px2rem(3);
              background-color: #ffd930;
              color: #52250a;
              font-weight: 700;
              font-size: px2rem(11);
            }
          }
          .sale{
            height: px2rem(13);
            line-height: px2rem(13);
            margin: px2rem(5) 0;
            .star {
              width: px2rem(70);
              height: px2rem(9);
              display: inline;
            }
            span {
              font-size: px2rem(11);
            }
            .bee{
              background: #2395ff;
              color: white;
              border-radius: px2rem(1);
              float: right;
              padding: px2rem(1);
            }
          }
          p {
            margin-top: px2rem(7);
            height: px2rem(15);
            span {
              float: left;
              font-size: px2rem(11);
            }
            .info {
              float: right;
            }
            .time{
              float: right;
              color: #009dfe;
            }
          }
        }
        .bottom{
          float: left;
          width: 75%;
          position: relative;
          margin-top: px2rem(7.5);
          border-top: px2rem(0.5) solid #eee;
          color: #939393;
          font-size: px2rem(10);
          .activity{
            margin: px2rem(9) 0;
            .new{
              color: white;
              border-radius: px2rem(3);
              font-size: px2rem(10);
              padding: px2rem(1);
            }
            .tips{
              display: inline-block;
              width: 75%;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
            .show{
              float: right;
              z-index: 100;
              i{
                font-size: px2rem(12);
              }
            }
          }
        }
      }
    }
    .sort-menu{
        position: relative;
        border-bottom: 1px solid #ddd;
        height: px2rem(40);
        line-height: px2rem(40);
        z-index: 100;
        .sort-menu-list{
            display: flex;
            justify-content: space-around;
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
            display: flex;
            z-index: 3;
            background-color: #fff;
            .el-dropdown-link{
                font-size: px2rem(13);
                ::before{
                    font-size:px2rem(8);
                }
            }
        }
    }
    .sort-head{
        height: px2rem(44);
        .sort-head-box{
            background-image: linear-gradient(90deg,#0af,#0085ff);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            height: px2rem(44);
            color: #fff;
            font-size: px2rem(18);
            background: #2395ff;
            .sort-name{
                position: absolute;
                top: 0;
                left: 50%;
                height: px2rem(44);
                max-width: 50%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-weight: 700;
                font-size: 1em;
                line-height: px2rem(44);
                transform: translateX(-50%);
            }
            .iconbox{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: px2rem(44); 
                    height: px2rem(44);
                    .back{
                         display: block;
                        width: px2rem(20);
                        height: px2rem(20);
                        color: #fff;
                        position: absolute;
                        left: px2rem(12);
                        top: px2rem(12);
                        font-size: px2rem(18)
                    }
            }
            }
        }


}
</style>
